<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-17 16:12:54
 * @LastEditors: 徐伟杰
 * @LastEditTime: 2022-11-04 14:41:58
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: 服务机构-机构详情-设备配备详情-精确到单台的设备信息
-->

<template>
  <!-- 单位基本信息 -->
  <view class="collapsePane">
    <!-- 字段标题 -->
    <view class="title" @click="open">
      设备明细
      <view :class="status ? 'cuIcon-unfold' : 'cuIcon-right'" />
    </view>

    <!-- 折叠中的内容 -->
    <view class="pane" :class="status ? 'unfold' : 'fold'">

      <!-- 表单字段内容 -->
      <view class="card_form scrollPane">
        <template>
          <view v-for="(list, index) in imageList" :key="index" class="flex flex-direction">
            <span>{{ list.specificationInfo }}</span>
            <view class="flex flex-direction">
              <view v-for="(list, index) in list.deviceImg" :key="index">
                <view style="border: 1rpx solid #e1e1e1;width: 350rpx; height: 350rpx">
                  <img style="width: 100%; height: 100%" :src="baseApiUrl + list" @click="ViewImage(list, index)"
                    alt="">
                </view>
              </view>
            </view>
          </view>
        </template>
      </view>

    </view>
  </view>

</template>
<script>
import { baseApiUrl } from '@/config.js';
export default {
  name: 'qualityManage',
  props: {
    imageId: {
      type: String,
      default: ""
    },
    agencyId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      baseApiUrl: baseApiUrl,
      status: false, // true为开启
      form: {
        name: '',
        image: [{ url: '', id: '' }]
      },
      formBuild: [
        { label: '维护保养检测', prop: 'name', type: 'input', require: true, disabled: false },
        { label: '消防安全评估', prop: 'name', type: 'input', require: true, disabled: false },
        { label: '赋分分值', type: 'partTitle' },
        { label: '维护保养检测', prop: 'name', type: 'input', require: true, disabled: false },
        { label: '消防安全评估', prop: 'name', type: 'input', require: true, disabled: false },
      ],
      imageList: []
    }
  },
  methods: {
    open() {
      let that = this
      if (this.status == false) {
        let data = {
          deviceClassification: that.imageId,
          agencyId: that.agencyId,
          pageSize: 10000,
        }
        that.$store.dispatch('listDeviceInfo', data).then(res => {
          if (res.code == 200) {
            that.status = true
            res.data.items.forEach(item => {
              item.deviceImg = item.deviceImg.split(',')
            })
            that.imageList = res.data.items
          }
        })
      } else {
        that.status = false
      }
    },
    changeImageFormat(url) {
      console.log(url)
      if (url) {
        let data = url.split(',')
        return data.map(item => {
          return this.baseApiUrl + item
        })
      }
    },
    ViewImage(imageUrl, index) {
      let url = this.baseApiUrl + imageUrl
      uni.previewImage({
        urls: [url],
        current: index
      });
    },
  }
}
</script>
<style lang="scss" scoped></style>